<template>
  <div class="outmain ba_f heighthv pad_20 bor_rad5">
    <div class="shuju_title mar_b20">
      <div class="shuju_title_text">
        <span>优惠券</span>
      </div>
    </div>
    <div class="flex-bet pad_l_20">
      <div class="coupon-item">
        <div>
          <div class="fon_16 color_3">满减券</div>
          <div class="fon_12 color_6 lh22 pad_t_10">
            <p>
              例：满100元减20元
              <br />便于合理控制活动成本
            </p>
          </div>
        </div>
        <el-button type="primary" @click="handleEdit('1')" size="medium" class="mar_t10">立即创建</el-button>
      </div>
      <div class="coupon-item">
        <div>
          <div class="fon_16 color_3">折扣券</div>
          <div class="fon_12 color_6 lh22 pad_t_10">
            <p>
              例：满100元打9折
              <br />提高店铺销量和客单价
            </p>
          </div>
        </div>
        <el-button type="primary" @click="handleEdit('2')" size="medium" class="mar_t10">立即创建</el-button>
      </div>
        <div class="coupon-item">
            <div>
                <div class="fon_16 color_3">商品兑换券</div>
                <div class="fon_12 color_6 lh22 pad_t_10">
                    <p>用于兑换指定商品<br>吸引顾客消费</p>
                </div>
            </div>
            <el-button type="primary" @click="handleEdit('3')" size="medium" class="mar_t10">立即创建</el-button>
        </div>
<!--        <div class="coupon-item">-->
<!--            <div>-->
<!--                <div class="fon_16 color_3">配送券</div>-->
<!--                <div class="fon_12 color_6 lh22 pad_t_10">-->
<!--                    <p>例：满100元减20元<br>满足条件立享减免配送费</p>-->
<!--                </div>-->
<!--            </div>-->
<!--            <el-button type="primary" @click="handleEdit" size="medium" class="mar_t10">立即创建</el-button>-->
<!--        </div>-->
    </div>
    <div class="pad_20 flex-bet flex-y-top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline searchform">
        <el-form-item label="优惠券名称">
          <el-input v-model="formInline.name" size="medium" placeholder="请输入优惠券名称" @input="onSearch"></el-input>
        </el-form-item>
        <el-form-item label="优惠券类型">
          <el-select v-model="formInline.type" placeholder="请选择" clearable @change="onSearch">
            <el-option v-for="item in labelOptions" :key="item.label" :label="item.value" :value="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch" size="medium">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tabledata mar_t20">
      <el-table :data="list" v-loading="listLoading" :element-loading-text="elementLoadingText" class="tablecenter" stripe style="width: 100%">
        <el-table-column prop="name" label="优惠券名称" width="300"></el-table-column>
        <el-table-column prop="type" label="优惠券类型">
          <template slot-scope="scope">
            <div v-if="scope.row.type=='1'"><el-tag size="mini" type="success">满减券</el-tag></div>
            <div v-if="scope.row.type=='2'"><el-tag size="mini">折扣券</el-tag></div>
            <div v-if="scope.row.type=='3'"><el-tag size="mini" type="warning">商品兑换券</el-tag></div>
          </template>
        </el-table-column>
        <el-table-column prop="isFull" label="优惠内容">
          <template slot-scope="scope">
            <div v-if="scope.row.type=='3'">兑换商品：<div>{{ scope.row.discount }}</div></div>
            <div v-if="scope.row.isFull=='1' && scope.row.type=='1'">无门槛 减{{scope.row.money}}</div>
            <div v-if="scope.row.isFull=='1' && scope.row.type=='2'">无门槛 打{{scope.row.discount}}折</div>
            <div v-if="scope.row.isFull=='2' && scope.row.type=='1'">满{{scope.row.fullMoney}} 减{{scope.row.money}}</div>
            <div v-if="scope.row.isFull=='2' && scope.row.type=='2'">满{{scope.row.fullMoney}} 打{{scope.row.discount}}折</div>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="领取条件" width="220">
          <template slot-scope="scope">
            <div class="">
              <div class="flex">适用门店:
                <div class="mar_l10 flex">
                  <div v-if="scope.row.storeType=='1'">仅本店可用</div>
                  <div v-if="scope.row.storeType=='2'">全店通用</div>
                  <div v-if="scope.row.storeType=='3'">指定门店可用</div>
                </div>
              </div>
              <div class="flex">适用场景:
                <div class="mar_l10 flex">
                  <div v-if="scope.row.useType.indexOf('1')>-1">外卖,</div>
                  <div v-if="scope.row.useType.indexOf('2')>-1">堂食,</div>
                  <div v-if="scope.row.useType.indexOf('3')>-1">快餐</div>
                </div>
              </div>
              <div class="flex">领取人限制:
                <div class="mar_l10 flex">
                  <div v-if="scope.row.memberType=='1'">所有人均可领取</div>
                  <div v-if="scope.row.memberType=='2'">会员可领</div>
                  <div v-if="scope.row.memberType=='3'">指定标签用户可领</div>
                </div>
              </div>
              <div class="flex">每人限领次数:
                <div class="mar_l10 flex">
                  <div v-if="scope.row.isMax=='1'">不限次数</div>
                  <div v-if="scope.row.isMax=='2'">每人限领{{scope.row.maxNum}}张</div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="stock" label="已使用/使用率">
          <template slot-scope="scope">
            <div class="flex-center">
              <span class="subjectcolor2">{{scope.row.cardUse}}</span>
              / {{scope.row.cardLv}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="stock" label="已领取/优惠券总量">
          <template slot-scope="scope">
            <div class="flex-center">
              <span class="subjectcolor2">{{scope.row.receiveNum}}</span>
              / {{scope.row.stock}}
            </div>
          </template>
        </el-table-column>
<!--        <el-table-column prop="display" label="状态">-->
<!--          <template slot-scope="scope">-->
<!--            <el-switch v-model="scope.row.display" active-value="1" inactive-value="2" @change="changeSwitch(scope.row)"></el-switch>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column prop="state" label="活动状态" >
          <template slot-scope="scope">
            <div v-if="scope.row.state=='1'"><el-tag size="mini" effect="dark">未开始</el-tag></div>
            <div v-if="scope.row.state=='2'"><el-tag size="mini" type="success" effect="dark">进行中</el-tag></div>
            <div v-if="scope.row.state=='3'"><el-tag size="mini" type="danger" effect="dark">已结束</el-tag></div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="flex-center">
              <el-button type="text" @click="handleEdit3(scope.row)">推广</el-button>
              <el-button type="text" @click="handleEdit2(scope.row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pagesize" :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
      <!--            <edit ref="edit" @fetchData="fetchData"></edit>-->
    </div>
    <el-dialog
        title="查看小程序推广码"
        :visible.sync="dialogFormVisible"
        width="600px"
        :close-on-click-modal="false"
    >
      <div class="t_c">
        <div class="pad_20">
          <img :src="codeimg" style="width: 200px;height: 200px;">
        </div>
        <div class="flex-center mar_l20">
          <div>小程序链接：yb_wm/my/coupon/coupon-dl?id={{codeimgId}}</div>
          <div class="mar_l10">
            <el-button type="text" @click="copyText('yb_wm/my/coupon/coupon-dl')">复制</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
        title="删除优惠券"
        :visible.sync="dialogFormVisible2"
        width="600px"
        :close-on-click-modal="false"
    >
      <div class="t_c">
        <el-radio-group v-model="selectDel">
          <el-radio label="2">用户已领取的优惠券可正常使用</el-radio>
          <el-radio label="3">一并删除</el-radio>
        </el-radio-group>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="handleDelete2">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { couponList, modifyCoupon } from '@/api/plug';
import {getCode} from "@/api/setup";

export default {
  created() {
    this.fetchData();
  },
  data() {
    return {
      formInline: {
        name: '',
        type: ''
      },
      list: [],
      listLoading: true,
      selectRows: '',
      elementLoadingText: '正在加载...',
      page: {
        total: 0,
        size: 10,
        currentPage: 1
      },
      labelOptions: [
        {
          label: 1,
          value: '优惠券'
        },
        {
          label: 2,
          value: '折扣券'
        },
        {
          label: 3,
          value: '商品兑换券'
        }
      ],
      codeimg:'',
      codeimgId:'',
      dialogFormVisible:false,
      dialogFormVisible2:false,
      selectDel:'2',
      selectId:'',
    };
  },
  methods: {
    async fetchData() {
      this.listLoading = true;
      const { data, count } = await couponList({ page: this.page.currentPage, name: this.formInline.name, type: this.formInline.type });
      this.list = data;
      this.page.total = count;
      this.listLoading = false;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
    onSearch() {
      this.fetchData();
    },
    async changeSwitch(row) {
      const { msg } = await modifyCoupon({ id: row.id, display: row.display, type: 1 });
      this.$baseMessage(msg, 'success');
      this.fetchData();
    },
    handleDelete(row) {
      this.dialogFormVisible2 = true
      this.selectId = row.id
      // if (row.id) {
      //   this.$baseConfirm('你确定要删除当前项吗', null, async () => {
      //     const { msg } = await modifyCoupon({ id: row.id, type: 2 });
      //     this.$baseMessage(msg, 'success');
      //     this.fetchData();
      //   });
      // } else {
      //   if (this.selectRows.length > 0) {
      //     const id = this.selectRows.map((item) => item.id);
      //     this.$baseConfirm('你确定要删除选中项吗', null, async () => {
      //       const { msg } = await modifyCoupon({ id, type: 2 });
      //       this.$baseMessage(msg, 'success');
      //       this.fetchData();
      //     });
      //   } else {
      //     this.$baseMessage('未选中任何行', 'error');
      //     return false;
      //   }
      // }
    },
    handleDelete2(){
      if (this.selectId) {
        this.$baseConfirm('你确定要删除此券吗？', null, async () => {
          const { msg } = await modifyCoupon({ id: this.selectId, type: this.selectDel });
          this.$baseMessage(msg, 'success');
          this.dialogFormVisible2 = false
          this.fetchData();
        });
      }
    },
    copyText(row) {
      let Url2 = row;
      var oInput = document.createElement('input');
      oInput.value = Url2;
      console.log(oInput.value);
      document.body.appendChild(oInput);
      oInput.select();
      document.execCommand("Copy");
      oInput.className = 'oInput';
      oInput.style.display = 'none';
      this.$message({
        message: '复制成功',
        type: 'success'
      });
    },
    async handleEdit3(row) {
      this.dialogFormVisible = true
      const {data} = await getCode({ident: 'couponCenterDl', page: `yb_wm/my/coupon/coupon-dl?id=${row.id}`,id:row.id});
      this.codeimg = data ? data : ''
      this.codeimgId = row.id
    },
    handletj() {
      this.$router.push({ path: 'deliverytongji' });
    },
    handleEdit(type) {
      if (type) {
        this.$router.push(`/couponAdd?type=${type}`);
      } else {
        this.$router.push({ path: 'couponAdd' });
      }
    },
    handleEdit2(row) {
      if (row.id) {
        this.$router.push(`/couponAdd?id=${row.id}&type=${row.type}`);
      } else {
        this.$router.push({ path: 'couponAdd' });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.coupon-item {
  white-space: nowrap;
  padding: 20px 27px 17px;
  display: flex;
  flex-direction: column;
  background: rgba(51, 136, 255, 0.07);
  margin-right: 20px;
  flex: 1;
  text-align: center;
  align-items: center;
  justify-content: space-between;
  border-radius: 5px;
}
</style>
